<template>
	<view style="height: 100%;background-color: #fff;">
		<view class="sub_acc">
			<view class="suboverall">
				<view class="subintroduce">
					你好，XXX
				</view>
				<view class="submessage">
					信息已为您加密处理，请放心使用
				</view>
			</view>
		</view>


		<view class="subname">
			<view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<!-- <view style="flex: 1;line-height: 42px;">姓名</view> -->
				<input style="padding: 20px 0 10px 8px;" class="uni-input" value="卡号" disabled="true" />
				<view style="flex: 5;text-align: right;">
					<input style="padding: 20px 10px 10px 0;color: gray" class="uni-input" v-model="card_name"
						placeholder="请绑定持卡人本人的银行卡" />
				</view>
			</view>

			<view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<!-- <view style="flex: 1;line-height: 42px;">姓名</view> -->
				<input style="padding: 20px 0 10px 8px;" class="uni-input" value="卡类型" disabled="true" />
				<view style="flex: 5;text-align: right;">
					<input disabled="true" style="padding: 20px 10px 10px 0;color: gray" class="uni-input" @click="selectOpen" v-model="card_type" />
				</view>
			</view>

			<view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<!-- <view style="flex: 1;line-height: 42px;">姓名</view> -->
				<input style="padding: 20px 0 10px 8px;" class="uni-input" value="手机号" disabled="true" />
				<view style="flex: 5;text-align: right;">
					<input type="number" style="padding: 20px 10px 10px 0;color: gray" class="uni-input"
						v-model="mobile_number" placeholder="请输入银行卡预留手机号" />
				</view>
			</view>

			<view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<view style="flex: 2;line-height: 42px;"><input style="padding: 15px 0 0 8px;" class="uni-input"
						value="验证码" disabled="true" /></view>
				<view style="flex: 6;text-align: right;">
					<input type="number" style="padding: 20px 0 10px 0;color: gray" class="uni-input" v-model="code"
						placeholder="请输入验证码" />
				</view>
				<view style="flex: 3;text-align: right;">
					<button style="padding: 5px 10px;margin-top: 5px;margin-right: 10px;" @click="sendCode"
						size="mini">发送短信</button>
				</view>
			</view>
		</view>


		<view class="uni-form-item uni-column" style="margin: 20px;">
			<checkbox-group @change="read">
				<label style="font-size: 14px;color: gray;">
					<radio style="transform:scale(0.7)" value="1" :checked=is_read />我已阅读并同意签署<view
						style="display: inline-block;">《xxx支付服务协议》</view>
					<view style="margin-left: 30px;">《xxxxxx银行快捷支付业务服务协议》</view>
				</label>
			</checkbox-group>
		</view>

		<button style="margin: 20px; background-color: red; color: #FFFFFF; font-size: 14px;" @click="bound('pages/wallet/bank')">
			立即绑定
		</button>

		<view class="subdetails">
			为了保障正常银行卡签约，需要手机您的卡信息
		</view>

		<view class="subservice">
			<image src="../../static/service.png" style="width: 15px; height: 15px; margin: 15px 5px 0 0;">

			</image>
				我的客服
		</view>
		
		<uni-popup ref="popup" type="center" :animation="false">
			<uni-popup-dialog mode="input" message="请选择" :duration="2000" :before-close="true" @close="close" @confirm="confirmSelect">
				<view style="background-color: #fff;width: 100%;padding: 10px;">
					<radio-group @change="selectChange" style="">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in pop_data" :key="index">
							<view style="margin-bottom: 10px;">
								<radio style="transform:scale(0.8)" :value="item.id+''" />
								<text>{{item.label}}</text>
							</view>
						</label>
					</radio-group>
				</view>
			</uni-popup-dialog>
		</uni-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				card_name: '',
				card_number: '',
				mobile_number: '',
				code: '',
				is_read: false,
				
				pop_data: [
					{id: 1, label: '银联卡', id: 2, label: '储蓄卡'}
				],
				card_type: '请选择',
				card_type_id: 0,
			}
		},
		onLoad() {
			// this.init();
		},
		methods: {
			read(e) {
				this.is_read = !this.is_read;
			},
			init(e) {
				let that = this;
				this.$api.getBankType().then(res => {
					if (res.meta.code == '000') {
						that.pop_data = res.data;
					}
				})
			},
			sendCode() {
				if (this.mobile_number == '') {
					return;
				}
				this.$api.postSendCode({
					mobile_number: this.mobile_number,
				}).then(res => {
					if (res.meta.code == '000') {
						uni.showToast({
							title: res.data.meta.msg,
							duration: 2000,
							icon: 'none',
						})
					}
				})
			},
			selectOpen() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			selectChange(e) {
				let that = this;
				this.card_type_id = e.detail.value;
				this.pop_data.forEach(function(item, i) {
					if (item.id == e.detail.value) {
						that.card_type = item.label;
					}
				})
			},
			confirmSelect(e) {
				this.$refs.popup.close();
			},
			bound(url) {
				// if (!this.is_read) {
				// 	uni.showToast({
				// 		title: '请确定已阅读协议',
				// 		duration: 2000,
				// 		icon: 'none',
				// 	})
				// 	return;
				// }
				uni.navigateTo({
					url:url
				})
				// if (this.card_type_id == 0 ||
				// 	this.card_name == '' ||
				// 	this.card_number == '' ||
				// 	this.mobile_number == ''
				// ) {
				// 	return;
				// }
				// this.$api.postBindBankCard({
				// 	card_type_id: this.card_type_id,
				// 	card_name: this.card_name,
				// 	card_number: this.card_number,
				// 	mobile_number: this.mobile_number,
				// 	uid: this.$common.getUser(),
				// }).then(res => {
				// 	if (res.meta.code == '000') {
				// 		uni.navigateBack();
				// 	}
				// })
			},
		}
	}
</script>

<style>
	.sub_acc {
		background-color: #F1F1F1;
	}

	.uni-input {
		font-size: 14px;
	}

	.suboverall {
		font-weight: lighter;
		background-color: #2979FF;
		color: #FFFFFF;
		padding: 20px;
	}

	.subintroduce {
		font-size: 15px;
		margin-bottom: 8px;
		font-weight: bold;
	}

	.submessage {
		font-size: 12px;
		margin-bottom: 10px;
	}

	.binding {
		background: #007AFF;
		text-align: center;
		margin: 20px 15px 10px 15px;
		padding: 12px;
		border-radius: 5px;
		font-size: 12px;
		color: #FFFFFF;
	}

	.subname {
		margin-left: 15px;
		font-size: 15px;
		white-space: nowrap
	}

	.subfind {
		padding: 20px 10px 10px 0;
		border-bottom: 1px solid #F1F1F1;

	}

	.subexplain {
		padding-left: 30px;
		text-align: right;

	}

	.subadd {
		font-size: 10px;
		color: #808080;
		padding-left: 15px;
	}

	.subdetails {
		text-align: center;
		font-size: 10px;
		color: #555555;
	}

	.subservice {
		text-align: center;
		font-size: 10px;
		color: #808080;
		margin: 55px 0;
		text-decoration: underline;
	}
</style>
